<template>
	<view class="content" :style="{
		height:$height()+'px',
		width:$width()+'px'
	}">
		<view class="" style="height: 1200rpx;background-color: white;position: relative;">
			<l-painter ref="painter" :board="poster" />
			<view class="bc" @click.stop="bc">
				保存到手机
			</view>
		</view>
	</view>

</template>

<script>
	import {
		timeFormat
	} from '@/untils/filters.js'
	export default {
		data() {
			return {
				info: {},
				poster: {

				}
			}
		},
		methods: {
			bc() {
				this.$refs.painter.canvasToTempFilePath({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						let path = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: () => {
								this.$toast('保存成功')
								console.log('save success');
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '温馨提示',
										content: '请打开相册权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success(settingdata) {
														if (settingdata
															.authSetting[
																'scope.writePhotosAlbum'
															]) {
															this.$toast(
																'点击图片保存到相册')
														} else {
															this.$toast('保存失败')
														}
													},
													fail: (v) => {
														console.log(v);
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消');
											}

										}
									})
								}
							}
						});
					}
				})
			},
		},
		onLoad(a) {
			// 接收数据
			this.info = uni.getStorageSync('poast');
			console.log(this.info, '数据');
			// this.info =a.info? JSON.parse(a.info):{}
			this.poster = {
				css: {
					// 根节点若无尺寸，自动获取父级节点
					padding: '30rpx',
					minHeight: '1150rpx',
					boxSizing: 'border-box',
					position: 'relative',
					width: this.$width() - 30 + 'px',
					borderRadius: '16rpx',
					'background': '#FFFFFF'
				},
				views: [

					{
						css: {
							// background: "#07c160",
							width: "100%",
							height: '300rpx',
							display: "inline-block",
						},
						type: "view",
						views: [{
								type: "image",
								src: this.info.images.split(',')[0],
								css: {
									width: '200rpx',
									height: '200rpx',
								borderRadius: '8rpx',
								}
							},
							{
								type: "view",
								css: {
									width: '65%',
									height: '200rpx',
									display: "inline-block",
									// background: "#ff9d00"
									justifyContent: 'space-around',
									paddingLeft: '30rpx',
									boxSizing: 'border-box'
								},
								views: [{
										type: 'text',
										text: this.info.title,
										// text: '测试测试测试',
										css: {
											fontSize: '30rpx',
											fontfamily: 'OPPOSans',
											fontWeight: 'bold',
											color: '#181818',
											overflow: 'hidden',
											display: "block",
											// height: '90rpx',
											textOverflow: 'ellipsis',
											lineClamp:2,
											whiteSpace: 'nowrap'
										},
									},
									{
										type: 'text',
										text: this.info.detail_address,
										// text: '测试测试测试',
										css: {
											fontSize: '24rpx',
											fontfamily: 'OPPOSans',
											fontWeight: '500',
											color: '#181818',
											display: "block",
											width: '100%',
											overflow: 'hidden',
											marginTop: '10rpx',
											lineClamp:2,

										},
									},
									{
										type: 'view',
										css: {
											width: '408rpx',
											height: '105rpx',
											display: "block",
											background: "#F4F5F7",
											borderRadius: '8rpx',
											padding: '10rpx 10rpx 0rpx 10rpx',
											'boxSizing': 'border-box',
											display: 'flex',
											marginTop:'20rpx',
											alignItems: 'center'
										},
										views: [{
												type: 'view',
												css: {
													display: "inline-block",
													paddingTop: '10rpx'
												},
												views: [{
														type: 'text',
														text: '租金：',
														css: {
															fontSize: '22rpx',
															fontfamily: 'OPPOSans',
															fontWeight: '500',
															color: '#999999',
															position: 'relative	',
															top: '20rpx'
														},
													},

													{
														type: 'text',
														text: `${this.info.rent}/月`,
														css: {
															fontSize: '30rpx',
															fontfamily: 'OPPOSans',
															fontWeight: '600',
															color: '#FF1B1B',
															display: "block",
														},
													}
												]

											},

											{
												type: 'view',
												css: {
													display: "inline-block",
													marginLeft: '100rpx',
													paddingTop: '10rpx'
												},
												views: [{
														type: 'text',
														text: '转让费：',
														css: {
															fontSize: '22rpx',
															fontfamily: 'OPPOSans',
															fontWeight: '500',
															color: '#999999',
														},
													},
													{
														type: 'text',
														text: `${this.info.transfer_fee}/万`,
														css: {
															fontSize: '30rpx',
															fontfamily: 'OPPOSans',
															fontWeight: '600',
															color: '#FF1B1B',
															display: "block",
														},
													}
												]

											}
										]
									},
									{
										type: 'text',
										text: `发布时间：${timeFormat(this.info.createtime,'yyyy-mm-dd')}`,
										css: {
											fontSize: '20rpx',
											fontfamily: 'OPPOSans',
											fontWeight: '500',
											marginTop: '10rpx',
											color: '#999999',
										},
									},
								]
							}
						]
					},
					{
						css: {
							background: "#1989fa",
							height: "478rpx",
							width: "100%",
							borderRadius: "16rpx",
							marginTop: '80rpx',
							// borderTopRightRadius: "60rpx",
							// borderBottomLeftRadius: "60rpx",
							display: "block",
						},
						type: "image",
						src: this.info.images.split(',')[0]
					},
					{
						css: {
							height: "100rpx",
							width: "100%",
							display: "block",
						},
						type: "view",
						views: [{
								css: {
									marginTop: '50rpx',
									background: "#1989fa",
									height: "95rpx",
									width: "95rpx",
									display: "inline-block",
								},
								type: "image",
								src: 'http://puputong.huijipin.cn/uploads/20220324/b8bb3bd55ce538e255802ec4c1e6f916.png'
							},
							{
								css: {
									height: "100rpx",
									width: "80%",
									display: "inline-block",
									marginTop: '50rpx',
									marginLeft: '30rpx'
								},
								type: "view",
								views: [{
										type: "text",
										text: '店铺二维码',
										css: {
											fontWeight: 'bold',
											fontSize: '30rpx',
											fontFamily: 'OPPOSans',
											color: ' #181818',
											display: "block",
										},
									},
									{
										type: "text",
										text: '扫码查看更多内容',
										css: {
											fontWeight: '500',
											fontSize: '24rpx',
											fontFamily: 'OPPOSans',
											color: ' #666666',
											display: "block",
											paddingTop: '10rpx'
										},
									}
								]
							}

						],
					},
					{
						css: {
							height: '1rpx',
							borderBottom: '1px dashed #F95B35',
							opacity: '0.5',
							borderRadius: '1px',
							marginTop: '100rpx'
						},
						type: "view",
					},
				]
			}
		}
	}
</script>

<style lang="scss">
	.bc {
		position: absolute;
		bottom: 10rpx;
		width: 400rpx;
		height: 80rpx;
		background: #FF1B1B;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		font-size: 30rpx;
		font-family: OPPOSans;
		font-weight: 500;
		color: #FFFFFF;
	}

	.content {
		background-image: url(http://puputong.huijipin.cn/uploads/20220324/0621289c6a84322a956b12d30a7314f7.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 30rpx;
	}
</style>
